<template>
  <div>
    <h3>工单统计<span class="title"> {{ start.replace('-','.') }} ~ {{ end.replace('-','.') }}</span></h3>
    <ul>
      <li>
        <p>{{ sum }}</p>
        <p class="order">工单总数（个）</p>
      </li>
      <li>
        <p>{{ finishCount }}</p>
        <p class="order">完成工单（个）</p>
      </li>
      <li>
        <p>{{ progressCount }}</p>
        <p class="order">进行工单（个）</p>
      </li>
      <li>
        <p>{{ cancelCount }}</p>
        <p class="order">取消工单（个）</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { orderStatus } from '@/api'
export default {
  data() {
    return {
      start: '2022-10-01',
      end: new Date().toLocaleDateString().replace(/\//g, '-'),
      list: []
    }
  },
  computed: {
    sum() {
      return this.list.reduce((pre, item) => pre + item.cancelCount + item.finishCount + item.progressCount, 0)
    },
    finishCount() {
      return this.list.reduce((pre, item) => pre + item.finishCount, 0)
    },
    progressCount() {
      return this.list.reduce((pre, item) => pre + item.progressCount, 0)
    },
    cancelCount() {
      return this.list.reduce((pre, item) => pre + item.cancelCount, 0)
    }
  },
  async created() {
    const res = await orderStatus(this.start, this.end)
    // console.log(res)
    this.list = res.data
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: 16px;
  font-weight: normal;
  .title{
    height: 21px;
    display: inline-block;
    line-height: 21px;
    margin-left: 10px;
    color: #999;
    font-size: 12px;
  }
}
ul{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  li {
    margin-top: 10px;
    margin-left: 20px;
    flex: 1;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    .order {
      height: 17px;
      line-height: 17px;
      color: #91a7dc;
      font-size: 12px;
      text-shadow:none;
    }
  }
}
</style>
